Ext.define('aps.HistorialPanel', {
    extend: 'Ext.Panel',
    alias : 'aps.HistorialPanel',
    
    layout:     'fit',
    frame:      false,
    closable:   false,
    border:     false,
    autoScroll: true,
    width: '100%',
    height: '100%',           
            
    initComponent: function() {
        var store = Ext.create('Ext.data.Store',{
            pageSize: 20,
            storeId:  'historial-store',
            fields:   [
                'idproyecto', 'proyecto', 'idfase',
                'fase', 'iditem', 'item', 'fecha',
                'hora', 'idusuario', 'nombre',
                'apellido', 'mensaje'
            ],
            proxy: {
                type: 'ajax',
                url:  '/consultar_historial',
                reader: {
                    type:          'json',
                    root:          'data',
                    totalProperty: 'total'
                }
            }
        });
        var template = new Ext.XTemplate(
            '<tpl for=".">',
            '<div class="historial-item">',
            '<img src="http://www.institutoroche.com/images/historial.gif" height="16pt"/>',
            '<h3><b>Proyecto:</b>&#32;{proyecto}</h3>',
            '<h3><b>Fase:</b>&#32;{fase}</h3>',
            '<h3><b>Item:</b>&#32;{item}</h3><br/>',
            '<p>{mensaje}</p><br/>',
            '<p><b>{fecha}&#32;{hora}</b>&#32;{apellido},&#32;{nombre}</p>',
            '</div>',
            '</tpl>'
        );
        var dataview = Ext.create('Ext.DataView',{
            store:           store,
            tpl:             template,
            itemSelector:    'div.historial-item',
            emptyText:       'Nada que mostrar',
            autoScroll:      true,
            trackOver:       true,
            overItemCls:     'historial-over',
            selectedItemCls: 'historial-select',
            singleSelect:    true
        });
        
        this.tbar = Ext.create('Ext.PagingToolbar', {
            store: store,
            displayInfo: true,
            displayMsg: '<b>{0} - {1} de {2}</b>',
            emptyMsg: "<b>No hay entradas que mostrar</b>",
        });
        
        this.items = [ dataview ];
        this.callParent(arguments);
    }
});
